<template >
<div class="ballot_bg">
  <div class="ballot_bg_inner">
    <div class="ballot_header">
      <div class="ballot_rule white_color sm_font" @click="act_rule = !act_rule">
        活动规则
      </div>
      <div class="ballot_title white_color"></div>
    </div>
    <div class="ballot_content">
      <div style="margin-bottom:1rem;" v-for="(item, index) in rankingCoupons" :key="index">
        <ballot-coupon :coupon="item" :result="true" :ranking="item.num"></ballot-coupon>
      </div>
    </div>
    <div class="ballot_result_bg02">
      <div class="ballot_result_nav">
        <div class="ballot_result_ranking">
          <p><b class="md_l_font">获奖用户</b></p>
          <ul class="white_color">
            <li :class="{active: item.checked}" v-for="(item, index) in ranking" :key="index" @click="rankQuery(index)"> <span>第<i>{{index + 1}}</i>名</span></li>
          </ul>
        </div>
      </div>
      <div class="usr_ranking white_bg">
        <p v-for="(item, index) in usrRankings" :key="index" v-if="usrRankings.length !== 0">
          <span class="rankingNum md_m_font color_gray">{{index + 1}}.</span>
          <span class="photo"><img :src="item.picUrl"/></span>
          <span class="name md_s_font color_gray">{{item.usrName}}</span>
        </p>
        <p v-if="usrRankings.length === 0" class="no_ranking">没有该名次的获奖名单</p>
      </div>
    </div>
    <div class="query sm_font white_color all_coup" @click="$router.push({name: 'ballot-result-coupon', query: {id: activeId}})">查看参与投票电子券</div>
    <div class="query sm_font white_color bear_detall" @click="queryResult(0)" v-if="ifJoin">获奖详情</div>
    <!-- 弹框：获奖信息 -->
    <modal v-if="prizeDetail">
      <div>
        <div class="modal_result white_color">
          <!-- 未中奖 -->
          <div class="no_prize" v-if="!prize">
            <p class="md_m_font"><b>很遗憾，未中奖！</b></p>
            <p class="md_s_font no_prize_words font_color">不要灰心，多参加活动总会中奖的！</p>
          </div>
          <!-- 中奖 -->
          <div class="prize" v-else>
            <p class="prize_title md_m_font"><b>恭喜，中奖啦！</b></p>
            <p class="sm_font no_prize_words font_color">
              获得电子券共{{prizeCoupons.length}}张
            </p>
            <div class="prize_coupon">
              <div class="prize_coupon_detail" v-for="prizeCoupon in prizeCoupons">
                <ballot-coupon :coupon="prizeCoupon" :ranking="prizeCoupon.awardNum" :result="true"></ballot-coupon>
              </div>
            </div>
            <p class="sm_font couponBag" @click="$router.push({name: 'cardList'})">去商券查看</p>
          </div>
        </div>
        <div class="close_modal" @click="close_modal"></div>
      </div>
    </modal>
    <!-- 弹框：投票规则 -->
    <ballot-rule v-if="act_rule" @close_modal="close_modal" :start-time="startTime" :end-time="endTime"></ballot-rule>
  </div>
</div>
</template>

<script>
import BallotCoupon from './coupon.vue'
import BallotRule from './rule.vue'
import {
  ballotResult, ballotTime, queryRankCoupon, queryRankUsr
} from 'src/service/getData3.js'
import {
  mapGetters,
  mapState
} from 'vuex'
import {
  Toast, Spinner
} from 'mint-ui'

export default {
  name: 'ballot-activity',
  components: {
    BallotCoupon,
    BallotRule
  },
  data: () => ({
    act_rule: false,
    // coupons: [],
    usrRankings: [],
    prize: false, // 是否中奖
    startTime: '',
    endTime: '',
    ranking: [
      {checked:true},
      {checked:false},
      {checked:false}
    ], // 排名
    prizeDetail: false, // 奖品弹框
    prizeCoupons: [], // 中奖电子券
    rankingCoupons: [], // 排名电子券
    awardNum: 0,
    ifJoin: false // 是否参加活动
  }),
  computed: {
    ...mapGetters(['usrId']),
    activeId() {
      return this.$route.query.id
    }
  },
  created() {
    // 投票活动起止时间
    this.queryBallotTime()
    // 查询获奖结果
    this.queryResult(1)
    // 投票电子券查询
    this.queryCoupon()
    // 用户排名查询
    this.rankQuery(0)
  },
  methods: {
    async queryBallotTime() {
      try {
        let res = await ballotTime(this.activeId)
        if (res.respCode !== '00'){
          throw new Error(res.errorInfo)
        } else {
          this.startTime = res.content.beginDate
          this.endTime = res.content.endDate
        }
      } catch (e) {
        Toast({
          message: e.message,
          duration: 1000
        });
      }
    },
    async queryResult(first) {
      try {
        let res = await ballotResult({
          id: this.activeId,
          usrId: this.usrId
        })
        if (res.respCode !== '00') {
          throw new Error(res.errorInfo)
        } else {
          this.ifJoin = res.content.ifJoin
          if (!res.content.ifJoin) { // 判断用户是否参加活动
            return
          }
          if (res.content.ifAwarded) { // 判断是否中奖
            this.prize = true
            this.prizeCoupons = res.content.detail
            this.awardNum = res.content.awardNum
          } else {
            this.prize = false
          }
          if (first && res.content.ifFirst) { // 是否首次查看
            this.prizeDetail = true
          } else if (!first) {
            this.prizeDetail = true
          }
        }
      } catch (e) {
        Toast({
          message: e.message,
          duration: 1000
        });
      }
    },
    async queryCoupon() {
      try {
        let res = await queryRankCoupon(this.activeId)
        let data = res.content.couponList
        this.rankingCoupons = data
      } catch (e) {
        Toast({
          message: e,
          duration: 1000
        });
      }
    },
    close_modal() {
      if (this.act_rule) {
        this.act_rule = false
      } else if (this.prizeDetail){
        this.prizeDetail = false
      }
    },
    async rankQuery(index) {
      this.ranking.forEach((item) => {
        item.checked = false
      })
      this.ranking[index].checked = true
      try {
        let res = await queryRankUsr({
          awardNum: index + 1,
          id: this.activeId
        })
        this.usrRankings = res.content.usrList
      } catch (e) {

      }
    }
  },
  beforeRouteLeave(to, from, next){

    next();
  }
}
</script>

<style lang="scss" scoped>
$width: 100%;
.ballot_bg {
    background: linear-gradient(to right top, #4d32a4, #844ae2);
    height: 100%;
    width: $width;
    position: relative;
    margin-top: -48px;
    padding-top: 48px;
    z-index: 0;
    overflow: auto;
}
.ballot_bg_inner {
    position: relative;
    z-index: -1;
    height: 100%;
    background-image: url("../../../images/ballot_result_bg.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
}
.ballot_header {
    height: 20rem;
}
.ballot_rule {
    background-image: url("../../../images/ballot_bg_03.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center 0;
    width: 2.2rem;
    text-align: center;
    padding: 0.2rem 0.3rem 0.56rem;
    box-sizing: content-box;
    position: absolute;
    top: 0;
    right: 1rem;
}
.ballot_title {
    width: 12rem;
    height: 6rem;
    position: absolute;
    top: 12%;
    left: 5%;
    background-image: url("../../../images/ballot_result_title.png");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    .time {
        line-height: 1.6rem;
        width: 96%;
        border-radius: 2rem;
        text-align: center;
        background-position: 6% center;
        background-size: 7%;
        margin: 0.5rem 0;
    }
}
.ballot_content {
    position: relative;
    width: 90%;
    margin: -24% auto 0;
    .coupon_list {
        width: 90%;
        margin: -35% auto auto;
    }
}
.defined_modal {
    top: 61%!important;
    z-index: 1!important;
}
.modal_result {
    width: 94%;
    margin: auto;
    height: 21.8rem;
    background-image: url("../../../images/ballot_success.png");
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    margin-top: 20%;
    text-align: center;
    position: relative;
}
.prize {
  padding-top: 5.2rem;
  .prize_title {

  }
}
.no_prize {
    width: 60%;
    margin: auto;
    padding-top: 50%;
    transform: translateY(-20%);
}
.no_prize_words {
  margin: 0.2rem 0;
}
.font_color {
  color: #f4e068;
}
.couponBag {
    text-decoration: underline;
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
}
.close_modal {
    width: 16px;
    height: 16px;
    background-image: url("../../../images/close.png");
    background-repeat: no-repeat;
    margin: auto;
    background-size: cover;
    margin-top: 1.5rem;
}
.ballot_result_bg02 {
    padding-top: 3.6rem;
    padding-bottom: 3.2rem;
    width: 100%;
    background-image: url("../../../images/ballot_result_bg2.png");
    background-repeat: no-repeat;
    background-size: 40%;
    min-height: 20rem;
}
.ballot_result_ranking,
.usr_ranking {
    width: 90%;
    // min-height: 8rem;
    margin: auto;
  .no_ranking {
    text-align:center;
    padding:1rem 0;
  }
}
.usr_ranking > p > span {
  display: inline-block;
  height: 2.8rem;
}
.usr_ranking {
  .rankingNum {
    font-style: italic;
    line-height: 2.8rem;
    width: 15%;
  }
  .photo {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    margin-right: 15%;
    > img {
      max-width: 100%;
    }
  }
}
.ballot_result_ranking:after {
    display: block;
    content: "";
    clear: both;
}
.ballot_result_ranking > p,
.ballot_result_ranking > ul > li {
    float: left;
}
.ballot_result_ranking > ul {
    float: right;
}
.ballot_result_ranking > p {
    width: 35%;
    text-align: center;
    // margin-top: 3rem;
}
.ballot_result_ranking > ul {
    width: 65%;
}
.ballot_result_ranking > ul > li {
    box-sizing: border-box;
    padding: 0.5rem 2%;
    width: 33%;
    text-align: center;
    background: linear-gradient(to left, #ffb883, #fe5367);
    border-radius: 3px 3px 0 0;
    border: 1px solid #e44b7a;
    border-bottom: none;
}
.ballot_result_nav b {
    color: #ffe745;
}
.usr_ranking {
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px solid #8c5aff;
}
.usr_ranking > p {
    padding: 0.5rem 1rem 0;
}
.usr_ranking > p:nth-child(2n) {
    background-color: #f8f3ff;
}
.active {
    position: relative;
    border: none!important;
}
.active::before {
    display: block;
    content: '';
    width: 100%;
    height: 3rem;
    position: absolute;
    background-color: #fff;
    bottom: -1.54rem;
    left: 0;
    box-sizing: border-box;
    border: 1px solid #8c5aff;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    z-index: 1;
}
.active > span {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 1.2rem;
    color: #5c32c0;
    transform: translate(-50%, -50%);
    font-weight: bold;
    i {
        font-size: 1.4rem;
    }
}
.query {
  position: fixed;
  padding: 0 1.4rem 0 1rem;
  width: 6.8rem;
  right: 0;
  text-align: right;
  border-radius: 5rem 0 0 5rem;
  z-index: 10;
  &::after {
    display:block;
    content: '';
    position: absolute;
    top: 50%;
    right: 0.4rem;
    background-image: url("../../../images/up.png");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-270deg) translateX(-50%);
    height: 1rem;
    width: 1rem;
  }
}
.all_coup {
  bottom: 6rem;
  background: linear-gradient(to right, #477af5, #35dff3);
  height: 3rem;
  padding-top: 0.3rem;
  box-sizing: border-box;
}
.bear_detall {
  bottom: 2rem;
  background: linear-gradient(to right, #fd5868, #fa50a4);
  line-height: 3rem;
}
.prize_coupon {
  width:96%;
  margin: 1.4rem auto 0;
  position:relative;
}
.prize_coupon_detail {
  position:absolute;
  width:100%;
  // box-shadow: 1px 5px 10px #000;
}
.prize_coupon_detail:nth-child(1){
  top: 0;
  z-index: 1002;
  box-shadow: -2px -1px 2px 1px rgba(0, 0, 0, .2), 2px 1px 2px 1px rgba(0, 0, 0, .2);
}
.prize_coupon_detail:nth-child(1), .prize_coupon_detail:nth-child(3) {
  left: 0;
}
.prize_coupon_detail:nth-child(2) {
  top: -0.65rem;
  left: -0.8rem;
  z-index: 1001;
  box-shadow: 2px -1px 2px 1px rgba(0, 0, 0, .2);
}
.prize_coupon_detail:nth-child(3){
  top: -1.2rem;
  left: .4rem;
  z-index: 1000;
}
</style>
